<template>
  <div class="header-nav">
      <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :default-active="$route.path"
      :router="true"
      text-color="#909399"
      active-text-color="#1e94f7"
      >
        <el-menu-item index="/user/userHome">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/user/onlineReserve">
          <i class="el-icon-s-shop"></i>
          <span slot="title">在线预定</span>
        </el-menu-item>
        <el-menu-item index="/user/orderSearch">
          <i class="el-icon-s-order"></i>
          <span slot="title">订单查询</span>
        </el-menu-item>
        <el-menu-item index="/user/memberShip">
          <i class="el-icon-info"></i>
          <span slot="title">会员中心</span>
        </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
// @background:linear-gradient(to bottom, #f5f7fa, #c3cfe2);
// @box-shadow:inset 0 1px rgba(255, 255, 255, 0.3);
@bg:#fff;
.header-nav{
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    background-color: @bg;
    width: 100%;
    .el-menu{
      border: 0;
      font-weight: 700;
      background-color: @bg;
      // background: @background;
      // box-shadow:@box-shadow;
      color: #fff;
      margin: 0 42px;
    }
}
</style>
